<template>

       <t-row style="background-color: white;margin-top: 10px;">
      <t-col :span="11">
      
      </t-col>
      <t-col :span="1">
        <div style="padding-top: 10px;padding-bottom: 10px;"> <t-button theme="primary" variant="base" @click="showAddDialog2">添加</t-button></div>
      </t-col>
  </t-row>
  <!-- 
        rowKey：取出每行数据的id属性
        data:table显示的数据行集合
        columns:定义表格的列的
        stripe：隔行变色，斑马纹
      
      -->
      <t-table
        :data="data"
        :columns=columns
        :stripe=stripe
        :bordered=bordered
        :hover=hover
        size="medium"
        table-layout="auto"
        :showHeader=showHeader
        cellEmptyContent="-"
        resizable
      >
           <template #rowIndex="{rowIndex}">
             {{ rowIndex + 1  }}
          </template>
          <template #image="{row}">
            <t-image
              :src="row.image"
              :style="{ width: '60px', height: '60px' }"
            />
          </template>
          <template #createTime="{row}">
              {{ fmtTime(row.createTime)}}
          </template>
          <template #status="{row}">
              <t-tag theme="primary" v-if="row.status==1">启用</t-tag>
              <t-tag theme="danger" v-if="row.status==0">禁用</t-tag>
          </template>
          <template #op="{row}">
            <t-space>
              <t-button variant="outline" theme="danger" ghost @click="del(row.id)">删除</t-button>
              <t-button variant="outline" theme="primary" @click="showEditDialog2(row.id)" ghost>编辑</t-button>
              <t-button variant="outline" theme="primary"  v-if="row.status==0" ghost @click="enableItem(row.id,1)">启用</t-button>
              <t-button variant="outline" theme="danger"  v-if="row.status==1" ghost @click="enableItem(row.id,0)">禁用</t-button>
            </t-space>
          </template>
      </t-table>

          <t-pagination
            showFirstAndLastPageBtn
            :total="pagination.total"
            :default-current="pagination.current"
            :default-page-size="10"
            @current-change="onCurrentChange"
            @page-size-change="onPageSizeChange"
          />

          <t-dialog 
            :visible.sync="delVisible" 
            theme = "danger"
            @close = "delVisible=false"
            @confirm="delItem"
            header="删除操作">
            <p>确定要删除吗，此操作不可逆!</p>
          </t-dialog>
</template>

<script setup lang="ts">
  import columns from '@/pages/serve/project/columns'
  import {ref} from 'vue'
  import dayjs from 'dayjs'
import { deleteById, enableProject } from '@/api/nursing_project_api'

  // 表格的数据应该是父组件传递过来的
  const props = defineProps(["data","pagination"])
  const emits = defineEmits(['changePage','changPageSize','showAddDialog','showEditDialog','refresh'])

  const delVisible = ref(false)
  const stripe = true
  const bordered = true
  const showHeader = true
  const hover = true

  const delId = ref(0)

  function del(id) {
      delVisible.value = true
      delId.value = id
  }

  const enableItem = async (id,status)=>{
      await enableProject({id,status})

      emits("refresh")
  }

  const delItem = async ()=>{
    await deleteById(delId.value)
    delVisible.value=false
    emits('refresh')
  }

  function showEditDialog2(id) {
    emits('showEditDialog',id)
  }

  function showAddDialog2() {
    emits('showAddDialog')
  }
  // 翻页
  function onCurrentChange(page) {
    emits('changePage',page)
  }

  function onPageSizeChange(size){
    emits('changPageSize',size)
  }

    function fmtTime(time) {
    // 格式化日期
    return dayjs(time).format('YYYY/MM/DD') 
  }
</script>